<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="danmuModule" v-show="isShowAni">
      <div class="danmuBox publicVCenter">
        <img src="@/assets/image/hdBar/rocketTitle.png" class="titleText" />
        <div class="sizeWrap">
          <div
            class="item publicHvCenter"
            v-for="item in danmuTypeList"
            :key="item.id"
            :class="[item.size, { active: currentDanmuType === item.giftId }]"
            v-tap="{ methods: chooseDanmuType, giftId: item.giftId }"
          >
            <div class="price publicHvCenter">{{ item.price }} <img src="@/assets/image/hdBar/diamond.png" class="unit" /></div>
            <div class="size publicHvCenter">{{ item.name }}</div>
            <div class="desc">{{ item.wish }}</div>
          </div>
        </div>
        <div class="txtWrap publicHCenter">
          <textarea
            v-model="content"
            :maxlength="canCustomizeInput ? 40 : 0"
            ref="text"
            cols="30"
            rows="10"
            placeholder="输入内容(40字以内)"
            v-on:blur="blur"
          ></textarea>
          <div class="ylBtn publicHvCenter" v-tap="{ methods: ganerateRandomWish }">语录</div>
        </div>
        <div class="btnWrap publicHvCenter" v-tap="{ methods: send }">霸气发送</div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { sendDanmuGift } from '@/api/index/index';
import { sendDanmuGiftMessage } from '@/api/chat/index';
import { POPUP_MODULE, QUICKWISH } from '@/assets/constant/index';
import { timeoutTask, generateRandom } from '../../utils/index';

const quickWishLen = QUICKWISH.length;
export default {
  name: 'danmuPopup',
  computed: {
    ...mapState({
      danmuTypeList: (state) => state.live.danmuTypeList,
      currentDanmuType: (state) => state.app.currentDanmuType,
      money: (state) => state.user.money,
      freeSendGift: (state) => state.user.freeSendGift,
      canCustomizeInput: (state) => state.app.canCustomizeInput,
    }),
  },
  watch: {
    canCustomizeInput(value) {
      if (!value) {
        this.content = '';
      }
    },
  },
  mounted() {
    // 执行弹出动画
    this.showAniStart();
  },
  data() {
    return {
      isShowAni: false, // 控制bapin box弹出动画
      content: '',
    };
  },
  methods: {
    ...mapMutations({
      setCurrentDanmuType: 'app/setCurrentDanmuType',
      setUserInfo: 'user/setUserInfo',
      togglePopup: 'app/togglePopup',
      setOrigin: 'app/setOrigin',
    }),
    blur() {
      window.scrollTo(0, -document.documentElement.clientHeight);
    },
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    ganerateRandomWish() {
      this.content = QUICKWISH[generateRandom(0, quickWishLen)];
    },
    chooseDanmuType(d) {
      this.setCurrentDanmuType(d.giftId);
    },
    send() {
      if (!this.validateSend()) {
        return;
      }
      this.$loading('发送中...');
      sendDanmuGift(this.content)
        .then((res1) => {
          this.$loading.close();
          // 更新 用户余额
          this.setUserInfo({
            money: res1.result.balance,
          });
          return this.sendBroadcast(this.content); // 发送礼物的广播
        })
        .then(() => {
          this.content = '';
          this.$toast.center('发送成功!');
          this.togglePopup();
        })
        .catch((err) => {
          console.log(err);
          this.$loading.close();
        });
    },
    validateSend() {
      let flag = true;
      const choosedDanmuType = this.danmuTypeList.find((item) => item.giftId === this.currentDanmuType);
      if (!this.currentDanmuType) {
        flag = false;
        this.$toast.center('请选择弹幕类型!');
      } else if (!this.content) {
        flag = false;
        this.$toast.center('请输入弹幕内容!');
      } else if (this.freeSendGift) {
        flag = true;
      } else if (choosedDanmuType.price > this.money) {
        this.$toast.center('余额不足,请充值!');
        flag = false;
        this.setOrigin('sendDanmu');
        this.togglePopup();
        timeoutTask(() => {
          this.togglePopup(POPUP_MODULE.rechargeModule.key);
        }, 200);
      }
      return flag;
    },
    sendBroadcast(content) {
      sendDanmuGiftMessage(content);
    },
  },
};
</script>
<style lang="less" scoped>
.danmuModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .danmuBox {
    width: 750px;
    height: 692px;
    background: #170d41;
    flex-direction: column;
    .titleText {
      width: 343px;
      height: 72px;
      position: relative;
    }
    .sizeWrap {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
      .item {
        width: 148px;
        height: 120px;
        border-radius: 8px;
        position: relative;
        flex-direction: column;
        &.small {
          background: linear-gradient(276deg, #71b3ff 0%, #2c82e4 100%);
          .size {
            width: 40px;
            height: 40px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            font-size: 20px;
          }
          &.active {
            box-shadow: 0px 0px 50px #2c82e4;
          }
        }
        &.mid {
          background: linear-gradient(276deg, #c571ff 0%, #e42cd5 100%);
          .size {
            width: 56px;
            height: 56px;
            font-size: 28px;
          }
          &.active {
            box-shadow: 0px 0px 50px #e42cd5;
          }
        }
        &.large {
          background: linear-gradient(276deg, #ff7171 0%, #e42c2c 100%);
          .size {
            width: 62px;
            height: 62px;
            font-size: 36px;
          }
          &.active {
            box-shadow: 0px 0px 50px #e42c2c;
          }
        }
        .price {
          width: 108px;
          height: 40px;
          background-image: url('../../assets/image/hdBar/priceDg.png');
          background-size: 100% 100%;
          position: absolute;
          top: -30px;
          left: 40px;
          font-size: 24px;
          color: #fff;
          letter-spacing: 1px;
          .unit {
            width: 20px;
            height: 16px;
            margin-left: 4px;
          }
        }
        .size {
          color: #ffffff;
          border-radius: 50%;
          border: solid 1px #ffffff;
        }
        .desc {
          font-size: 24px;
          letter-spacing: 1px;
          color: #ffffff;
          margin-top: 2px;
        }
      }
    }
    .txtWrap {
      margin-top: 48px;
      position: relative;
      textarea {
        width: 710px;
        height: 116px;
        font-size: 28px;
        padding: 20px 32px;
        padding-right: 120px;
        color: #fff;
        outline: none;
        box-sizing: border-box;
        border-image: linear-gradient(99deg, #45f6fe 0%, #c026ed 100%) 1 1;
        background-color: transparent;
        &::placeholder {
          font-size: 28px;
          color: #756ea1;
        }
      }
      .ylBtn {
        width: 88px;
        height: 48px;
        background: #231f44;
        border-radius: 10px;
        font-size: 28px;
        font-weight: 400;
        color: #c2baf5;
        position: absolute;
        top: 32px;
        right: 48px;
      }
    }
    .btnWrap {
      width: 400px;
      height: 92px;
      margin-top: 48px;
      background: linear-gradient(90deg, #6c47ff, #ff68f9 100%);
      font-size: 32px;
      font-weight: 400;
      color: #ffffff;
      border-radius: 8px;
    }
  }
}
</style>
